<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="shortcut icon"
      href="/src/img/template-03/favicon.ico"
      type="image/x-icon"
    />
    <link rel="stylesheet" href="/src/css/template-03/template-3.css" />
    <link rel="stylesheet" href="/src/icon/iconfont.css" />
    <script type="module" src="/src/js/template-03/template-3.js"></script>
    <title>Luckin</title>
  </head>
  <body
    class="relative h-screen w-screen text-center text-base/8 text-stone-900"
  >
    <div class="order-list-container flex h-full w-full items-start">
      <!-- 左边 -->
      <div class="order-type flex h-full w-1/4 flex-col bg-stone-100">
        <div
          class="order-type-item flex h-16 w-full items-center justify-center border-l-4 border-l-blue-500 bg-white font-semibold shadow-md"
        >
          推荐
        </div>
        <div
          class="order-type-item flex h-16 w-full items-center justify-center font-semibold"
        >
          热销
        </div>
        <div
          class="order-type-item flex h-16 w-full items-center justify-center font-semibold"
        >
          折扣
        </div>
        <div
          class="order-type-item flex h-16 w-full items-center justify-center px-4 text-base/6 font-semibold"
        >
          夏日冰咖必喝榜
        </div>
        <div
          class="order-type-item flex h-16 w-full items-center justify-center font-semibold"
        >
          进店必喝
        </div>
        <div
          class="order-type-item flex h-16 w-full items-center justify-center font-semibold"
        >
          只喝美式
        </div>
      </div>

      <!-- 右边 -->
      <div
        class="order-content flex h-full flex-1 flex-col items-center justify-start"
      ></div>
    </div>

    <footer
      class="footer fixed bottom-0 left-0 flex h-18 w-full items-center justify-between bg-zinc-700 text-white"
    >
      <div class="flex flex-1 gap-4 pl-8">
        <div
          class="shoppingCarBg -mt-6 flex h-16 w-16 items-center justify-center rounded-full bg-zinc-500"
        >
          <div
            class="shoppingCar relative flex h-14 w-14 place-items-center rounded-full bg-zinc-700"
          >
            <div
              class="shoppingCarNum absolute top-0 right-0 hidden h-4 w-4 rounded-full bg-red-500 text-sm/4"
            >
              1
            </div>
            <span class="iconfont icon-gouwuche w-full text-2xl"></span>
          </div>
        </div>

        <div class="flex flex-col">
          <span class="shoppingCarTotal text-left text-2xl/8">￥0.00</span>
          <span class="text text-xs/4">配送费5元</span>
        </div>
      </div>
      <div
        class="deliveryThresholdBtn flex h-full w-1/3 items-center justify-center bg-zinc-500 p-4"
      >
        <p class="underDeliveryThreshold">
          还差￥<span class="remainDeliveryThreshold">0</span>元起送
        </p>
        <p class="reachDeliveryThreshold hidden text-xl/12 font-semibold">
          去结算
        </p>
      </div>
    </footer>

    <div
      class="add-tween iconfont icon-zengjia3 absolute hidden text-lg/8 text-sky-500 transition-all duration-500 ease-in"
    ></div>
  </body>
</html>
